<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-panel">
        <!-- 左侧品牌区 -->
        <div class="brand-container">
          <div class="brand-content">
            <div class="logo-wrapper">
              <img src="../assets/logo/logo.png" alt="Logo" class="logo" />
            </div>
            <h1 class="system-title">{{ title }}</h1>
            <div class="system-subtitle">
              <span>智慧政务</span>
              <span class="highlight">综合管理平台</span>
            </div>
            
            <!-- 背景装饰 -->
            <div class="brand-decoration"></div>
            <div class="brand-illustration"></div>
            
            <!-- 动态装饰元素 -->
            <div class="floating-dots">
              <div class="dot dot-1"></div>
              <div class="dot dot-2"></div>
              <div class="dot dot-3"></div>
              <div class="dot dot-4"></div>
              <div class="dot dot-5"></div>
              <div class="dot dot-6"></div>
            </div>
          </div>
        </div>
        
        <!-- 右侧登录表单 -->
        <div class="form-container">
          <div class="form-header">
            <h2 class="welcome-text">{{ proxy.$t('login.login') }}</h2>
            <lang-select class="lang-selector" />
          </div>
          
          <!-- 账号密码登录表单 -->
          <el-form 
            ref="loginRef" 
            :model="loginForm" 
            :rules="loginRules" 
            class="login-form"
          >
            <el-form-item v-if="tenantEnabled" prop="tenantId">
              <div class="input-label">单位选择</div>
              <el-select 
                v-model="loginForm.tenantId" 
                filterable 
                :placeholder="proxy.$t('login.selectPlaceholder')" 
                class="custom-input"
              >
                <el-option 
                  v-for="item in tenantList" 
                  :key="item.tenantId" 
                  :label="item.companyName" 
                  :value="item.tenantId"
                ></el-option>
                <template #prefix>
                  <svg-icon icon-class="company" class="input-icon" />
                </template>
              </el-select>
            </el-form-item>
            
            <el-form-item prop="username">
              <div class="input-label">用户名</div>
              <el-input 
                v-model="loginForm.username" 
                type="text" 
                size="large" 
                auto-complete="off" 
                :placeholder="proxy.$t('login.username')"
                class="custom-input"
              >
                <template #prefix>
                  <svg-icon icon-class="user" class="input-icon" />
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <div class="input-label">密码</div>
              <el-input
                v-model="loginForm.password"
                type="password"
                size="large"
                auto-complete="off"
                :placeholder="proxy.$t('login.password')"
                @keyup.enter="handleLogin"
                class="custom-input"
                show-password
              >
                <template #prefix>
                  <svg-icon icon-class="password" class="input-icon" />
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item v-if="captchaEnabled" prop="code">
              <div class="input-label">验证码</div>
              <div class="captcha-container">
                <el-input
                  v-model="loginForm.code"
                  size="large"
                  auto-complete="off"
                  :placeholder="proxy.$t('login.code')"
                  @keyup.enter="handleLogin"
                  class="captcha-input custom-input"
                >
                  <template #prefix>
                    <svg-icon icon-class="validCode" class="input-icon" />
                  </template>
                </el-input>
                <div class="captcha-image" @click="getCode">
                  <img :src="codeUrl" alt="验证码" />
                </div>
              </div>
            </el-form-item>
            
            <div class="form-options">
              <el-checkbox v-model="loginForm.rememberMe" class="remember-me">
                {{ proxy.$t('login.rememberPassword') }}
              </el-checkbox>
              
              <a href="javascript:void(0)" class="forgot-password">忘记密码?</a>
            </div>
            
            <el-button 
              :loading="loading" 
              type="primary" 
              class="login-button"
              @click.prevent="handleLogin"
            >
              <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
              <span v-else>{{ proxy.$t('login.logging') }}</span>
            </el-button>
            
            <div class="register-section" v-if="register">
              <span>还没有账号?</span>
              <router-link class="register-link" :to="'/register'">
                {{ proxy.$t('login.switchRegisterPage') }}
              </router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    
    <div class="login-footer">
      <span>Copyright © 2018-{{ new Date().getFullYear() }} 疯狂的狮子Li All Rights Reserved.</span>
    </div>
    
    <!-- 背景动画和装饰 -->
    <div class="animated-bg">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="shape shape-5"></div>
      <div class="shape shape-6"></div>
      <div class="shape shape-7"></div>
      <div class="floating-circle circle-1"></div>
      <div class="floating-circle circle-2"></div>
      <div class="floating-circle circle-3"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCodeImg, getTenantList } from '@/api/login';
import { useUserStore } from '@/store/modules/user';
import { LoginData, TenantVO } from '@/api/types';
import { to } from 'await-to-js';
import { useI18n } from 'vue-i18n';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const title = import.meta.env.VITE_APP_TITLE;
const userStore = useUserStore();
const router = useRouter();
const { t } = useI18n();

const loginForm = ref<LoginData>({
  tenantId: '000000',
  username: 'admin',
  password: 'admin123',
  rememberMe: false,
  code: '',
  uuid: ''
} as LoginData);

const loginRules: ElFormRules = {
  tenantId: [{ required: true, trigger: 'blur', message: t('login.rule.tenantId.required') }],
  username: [{ required: true, trigger: 'blur', message: t('login.rule.username.required') }],
  password: [{ required: true, trigger: 'blur', message: t('login.rule.password.required') }],
  code: [{ required: true, trigger: 'change', message: t('login.rule.code.required') }]
};

const codeUrl = ref('');
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 租户开关
const tenantEnabled = ref(true);

// 注册开关
const register = ref(false);
const redirect = ref('/');
const loginRef = ref<ElFormInstance>();
// 租户列表
const tenantList = ref<TenantVO[]>([]);

watch(
  () => router.currentRoute.value,
  (newRoute: any) => {
    redirect.value = newRoute.query && newRoute.query.redirect && decodeURIComponent(newRoute.query.redirect);
  },
  { immediate: true }
);

const handleLogin = () => {
  loginRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        localStorage.setItem('tenantId', String(loginForm.value.tenantId));
        localStorage.setItem('username', String(loginForm.value.username));
        localStorage.setItem('password', String(loginForm.value.password));
        localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
      } else {
        // 否则移除
        localStorage.removeItem('tenantId');
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        localStorage.removeItem('rememberMe');
      }
      // 调用action的登录方法
      const [err] = await to(userStore.login(loginForm.value));
      if (!err) {
        const redirectUrl = redirect.value || '/';
        await router.push(redirectUrl);
        loading.value = false;
      } else {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
          await getCode();
        }
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

/**
 * 获取验证码
 */
const getCode = async () => {
  const res = await getCodeImg();
  const { data } = res;
  captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
  if (captchaEnabled.value) {
    codeUrl.value = 'data:image/gif;base64,' + data.img;
    loginForm.value.uuid = data.uuid;
  }
};

const getLoginData = () => {
  const tenantId = localStorage.getItem('tenantId');
  const username = localStorage.getItem('username');
  const password = localStorage.getItem('password');
  const rememberMe = localStorage.getItem('rememberMe');
  loginForm.value = {
    tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
    username: username === null ? String(loginForm.value.username) : username,
    password: password === null ? String(loginForm.value.password) : String(password),
    rememberMe: rememberMe === null ? false : Boolean(rememberMe)
  } as LoginData;
};

/**
 * 获取租户列表
 */
const initTenantList = async () => {
  const { data } = await getTenantList(false);
  tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
  if (tenantEnabled.value) {
    tenantList.value = data.voList;
    if (tenantList.value != null && tenantList.value.length !== 0) {
      loginForm.value.tenantId = tenantList.value[0].tenantId;
    }
  }
};

onMounted(() => {
  getCode();
  initTenantList();
  getLoginData();
});
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(140deg, #f8f9fa 0%, #e9ecef 100%);
  overflow: hidden;
}

.login-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}

.login-panel {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 900px;
  min-height: 520px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 左侧品牌区 */
.brand-container {
  position: relative;
  flex: 1;
  background: linear-gradient(135deg, #1867c0 0%, #0d47a1 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-content {
  position: relative;
  padding: 40px;
  z-index: 2;
  text-align: center;
}

.logo-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: float 6s ease-in-out infinite;
}

.logo {
  width: 65px;
  height: auto;
}

.system-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  animation: fadeIn 0.8s ease-in-out;
}

.system-subtitle {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  gap: 4px;
  animation: fadeIn 1s ease-in-out;
}

.highlight {
  color: #ffffff;
  font-weight: 600;
}

.brand-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  z-index: 1;
}

.brand-illustration {
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 500px;
  height: 500px;
  background: url('') no-repeat center;
  opacity: 0.2;
  z-index: 1;
}

/* 浮动点动画 */
.floating-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.dot {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  
  &-1 {
    width: 12px;
    height: 12px;
    top: 20%;
    left: 15%;
    animation: floating 6s ease-in-out infinite;
  }
  
  &-2 {
    width: 8px;
    height: 8px;
    top: 35%;
    left: 25%;
    animation: floating 8s ease-in-out infinite 1s;
  }
  
  &-3 {
    width: 15px;
    height: 15px;
    top: 65%;
    left: 10%;
    animation: floating 7s ease-in-out infinite 2s;
  }
  
  &-4 {
    width: 10px;
    height: 10px;
    top: 30%;
    right: 20%;
    animation: floating 9s ease-in-out infinite 1s;
  }
  
  &-5 {
    width: 6px;
    height: 6px;
    top: 60%;
    right: 30%;
    animation: floating 5s ease-in-out infinite;
  }
  
  &-6 {
    width: 18px;
    height: 18px;
    bottom: 20%;
    right: 15%;
    animation: floating 8s ease-in-out infinite 3s;
  }
}

/* 右侧表单区 */
.form-container {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.welcome-text {
  font-size: 26px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
  animation: fadeInRight 0.6s ease-in-out;
}

.lang-selector {
  :deep(.el-input__inner) {
    border: none;
    background: transparent;
  }
}

.login-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.8s ease-in-out;
}

.input-label {
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 6px;
}

.custom-input {
  height: 45px;
  width: 100%;
  
  :deep(.el-input__wrapper) {
    padding: 0 16px;
    border-radius: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: none !important;
    transition: all 0.3s ease;

    &:hover {
      border-color: #1867c0;
    }
    
    &:focus, &.is-focus {
      border-color: #1867c0;
      box-shadow: 0 0 0 3px rgba(24, 103, 192, 0.15) !important;
    }
  }

  :deep(.el-input__inner) {
    height: 43px;
    color: #2d3748;
    font-size: 15px;
  }
}

.input-icon {
  height: 20px;
  width: 20px;
  color: #718096;
  margin-right: 10px;
}

.captcha-container {
  display: flex;
  gap: 16px;
}

.captcha-input {
  flex: 1;
}

.captcha-image {
  width: 120px;
  height: 45px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0;
}

.remember-me {
  color: #4a5568;
  font-size: 14px;
}

.forgot-password {
  color: #1867c0;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  
  &:hover {
    color: #0d47a1;
    text-decoration: underline;
  }
}

.login-button {
  height: 45px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #1867c0 0%, #0d47a1 100%);
  border: none;
  box-shadow: 0 5px 15px rgba(24, 103, 192, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 103, 192, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.register-section {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #4a5568;
}

.register-link {
  color: #1867c0;
  text-decoration: none;
  font-weight: 500;
  
  &:hover {
    text-decoration: underline;
  }
}

.login-footer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #718096;
  font-size: 13px;
  z-index: 10;
}

/* 背景动画 */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(24, 103, 192, 0.05) 0%, rgba(13, 71, 161, 0.05) 100%);
  animation: float 15s infinite ease-in-out;
  
  &-1 {
    top: 15%;
    left: 10%;
    width: 300px;
    height: 300px;
    animation-delay: 0s;
  }
  
  &-2 {
    top: 60%;
    left: 15%;
    width: 200px;
    height: 200px;
    animation-delay: -3s;
  }
  
  &-3 {
    top: 20%;
    right: 15%;
    width: 180px;
    height: 180px;
    animation-delay: -6s;
  }
  
  &-4 {
    bottom: 20%;
    right: 10%;
    width: 240px;
    height: 240px;
    animation-delay: -9s;
  }
  
  &-5 {
    top: 50%;
    right: 25%;
    width: 150px;
    height: 150px;
    animation-delay: -12s;
  }
  
  &-6 {
    bottom: 35%;
    left: 30%;
    width: 120px;
    height: 120px;
    animation-delay: -5s;
  }
  
  &-7 {
    top: 40%;
    left: 40%;
    width: 80px;
    height: 80px;
    animation-delay: -8s;
  }
}

/* 浮动圆圈 */
.floating-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(24, 103, 192, 0.1);
  animation: pulse 4s infinite ease-in-out;
  
  &.circle-1 {
    top: 30%;
    left: 20%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
  }
  
  &.circle-2 {
    bottom: 40%;
    right: 25%;
    width: 80px;
    height: 80px;
    animation-delay: -1s;
  }
  
  &.circle-3 {
    top: 60%;
    right: 15%;
    width: 40px;
    height: 40px;
    animation-delay: -2s;
  }
}

/* 动画效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes floating {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, -15px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .login-panel {
    max-width: 800px;
  }
  
  .brand-content {
    padding: 30px;
  }
  
  .form-container {
    padding: 30px;
  }
}

@media (max-width: 991px) {
  .login-panel {
    flex-direction: column;
    max-width: 450px;
    min-height: auto;
  }
  
  .brand-container {
    padding: 30px 0;
  }
  
  .brand-content {
    padding: 20px;
  }
  
  .brand-illustration {
    display: none;
  }
  
  .form-container {
    padding: 25px;
  }
}

@media (max-width: 576px) {
  .login-content {
    padding: 0 15px;
  }
  
  .login-panel {
    box-shadow: none;
    background-color: transparent;
  }
  
  .brand-container {
    display: none;
  }
  
  .form-container {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    padding: 25px 20px;
  }
}
</style>
